<template>
	<view>
		<empty v-if="isEmpty" :emptyImg="emptyImg" :emptyTxt="emptyTxt"></empty>
		<view v-if="!isEmpty" class="item" v-for="(res, index) in siteList" :key="res.id">
			<view class="top">
				<view class="name">{{ res.bank_name }}</view>
				<view class="phone">{{ res.bank_account }}</view>
				<view class="tag">
					<text v-if="res.is_default == '1'">默认</text>
				</view>
			</view>
			<view class="bottom">
				<view>{{res.bank_card}}</view>
				<view style="display: flex;">
					<view @click.stop="toAddSite(res)">
						<u-icon name="edit-pen" :size="40" color="#20cbd4"></u-icon>
					</view>
					<view @click.stop="toDelSite(res)">
						<u-icon name="trash" :size="40" style="margin-left: 10px;" color="#fa3534"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" />
		<view class="addSite" @click="toAddSite({})">
			<view class="add">
				<u-icon name="plus" color="#ffffff" class="icon" :size="30"></u-icon>添加银行卡
			</view>
		</view>
		<u-modal v-model="show" :show-cancel-button="true" content="您确定要删除此项吗？" @cancel="cancel"
			@confirm="confirm"></u-modal>
		<hoverMenu></hoverMenu>
		<login-model ref="loginModel"></login-model>
	</view>
</template>

<script>
	import hoverMenu from "@/components/public/sa-hover-menu.vue";
	import loginModel from "@/components/public/loginModel.vue";
	import empty from "@/components/public/empty.vue";
	import {
		bankList,
		delBank
	} from "@/common/api.js";
	export default {
		components: {
			empty,
			loginModel,
			hoverMenu
		},
		data() {
			return {
				isEmpty: false,
				emptyImg: getApp().globalData.imageUrl + "empty_goods.png",
				emptyTxt: "暂无银行卡，请进行添加～",
				show: false,
				siteList: [],
				status: 'loadmore',
				pageSize: 10,
				page: 1,
				total: 0,
				type: "",
				id: ""
			};
		},
		onShow() {
			this.$set(this, 'siteList', [])
			this.page = 1;
			this.status = 'loadmore'
			this.selecBank()
		},
		onReachBottom() {
			this.selecBank()
		},
		methods: {
			floatTouchClick(index) {
				this.$uniApi.floatTouch(index);
			},
			selecBank() {
				if (this.status !== 'loadmore') {
					return
				}
				this.status = 'loading'
				bankList(this, {
					page: this.page,
					limit: this.pageSize
				}, (res) => {
					this.$set(this, 'siteList', [...this.siteList, ...res])
					this.page++
					this.status = 'loadmore'
					if (res.length === 0) {
						this.status = 'nomore'
					}
				})
			},
			toAddSite(bank) {
				uni.navigateTo({
					url: '/user/editBank?bank=' + JSON.stringify(bank)
				});
			},
			toDelSite(item) {
				this.id = item.id;
				this.show = true;
			},
			confirm() {
				this.show = false;
				delBank(this, {
					id: this.id
				}, (res) => {
					this.$u.toast(res.msg);
					this.$set(this, 'siteList', [])
					this.page = 1;
					this.status = 'loadmore'
					this.selecBank();
				});
			},
			cancel() {
				this.show = false;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.item {
		padding: 40rpx 20rpx;

		.top {
			display: flex;
			font-weight: bold;
			font-size: 34rpx;

			.phone {
				margin-left: 60rpx;
			}

			.tag {
				display: flex;
				font-weight: normal;
				align-items: center;

				text {
					display: block;
					width: 60rpx;
					height: 34rpx;
					line-height: 34rpx;
					color: #ffffff;
					font-size: 20rpx;
					border-radius: 6rpx;
					text-align: center;
					margin-left: 30rpx;
					background-color: #20CBD4;
				}

				.red {
					background-color: red
				}
			}
		}

		.bottom {
			display: flex;
			margin-top: 20rpx;
			font-size: 28rpx;
			justify-content: space-between;
			color: #999999;
		}
	}

	.addSite {
		display: flex;
		justify-content: space-around;
		width: 600rpx;
		line-height: 100rpx;
		position: fixed;
		bottom: 30rpx;
		left: 80rpx;
		background-color: #20CBD4;
		border-radius: 60rpx;
		font-size: 30rpx;

		.add {
			display: flex;
			align-items: center;
			color: #ffffff;

			.icon {
				margin-right: 10rpx;
			}
		}
	}
</style>